<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动标签输入框</title>
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #212121;
	}
	
	.container {
	    display: flex;
	    flex-direction: column;
	    gap: 7px;
	    position: relative;
	    color: white;
	}
	
	.container .label {
	    font-size: 15px;
	    padding-left: 10px;
	    position: absolute;
	    top: 13px;
	    transition: 0.3s;
	    pointer-events: none;
	}
	
	.input {
	    width: 200px;
	    height: 45px;
	    border: none;
	    outline: none;
	    padding: 0px 7px;
	    border-radius: 6px;
	    color: #fff;
	    font-size: 15px;
	    background-color: transparent;
	    box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
	        -1px -1px 6px rgba(255, 255, 255, 0.4);
	}
	
	.input:focus {
	    border: 2px solid transparent;
	    color: #fff;
	    box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
	        -1px -1px 6px rgba(255, 255, 255, 0.4),
	        inset 3px 3px 10px rgba(0, 0, 0, 1),
	        inset -1px -1px 6px rgba(255, 255, 255, 0.4);
	}
	
	.container .input:valid~.label,
	.container .input:focus~.label {
	    transition: 0.3s;
	    padding-left: 2px;
	    transform: translateY(-35px);
	}
	
	.container .input:valid,
	.container .input:focus {
	    box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
	        -1px -1px 6px rgba(255, 255, 255, 0.4),
	        inset 3px 3px 10px rgba(0, 0, 0, 1),
	        inset -1px -1px 6px rgba(255, 255, 255, 0.4);
	}
</style>
<body>
    <div class="container">
        <input required="" type="text" name="text" class="input">
        <label class="label">Username</label>
    </div>
</body>

</html>